<template>
  <div class="book-choose">
    <!-- 图书分类 -->
    <div class="choose-tag">
      <router-link
        v-for="item in fiction"
        tag="div"
        :key="item.id"
        :style="{ color: item.color }"
        class="tags"
        to="bookclassify"
      >
        {{ item.label }}
      </router-link>
    </div>
  </div>
</template>

<script>
import { getFictionApi } from "../api/novelmain.js";

export default {
  data() {
    return {
      fiction: null,
    };
  },
  methods: {
    getFictionApiFun() {
      getFictionApi().then((data) => {
        this.fiction = data.fiction;
        console.log(this.fiction);
      });
    },
  },
  created() {
    this.getFictionApiFun();
  },
};
</script>

<style lang="scss" scoped>
.choose-tag {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .tags {
    border-right: 1px #dedede solid;
    border-bottom: 1px #dedede solid;
    background: #fff;
    font-size: 14px;
    color: #333;
    text-align: center;
    line-height: 46px;
    padding: 0 65px;
  }
}
</style>